<template>
  <div>
    <my-header title="新增收获地址"></my-header>
    <mt-field label="姓名" placeholder="请输入姓名" type="text" v-model="username"></mt-field>
    <mt-field label="电话" placeholder="请输入电话" type="tel" v-model="telephone"></mt-field>
    <mt-field label="邮编" placeholder="请输入邮编" type="number" v-model="zipCode"></mt-field>
    <mt-field style="position: relative" label="地址" readonly type="text" v-model="inputAddress">
      <span class="lbl-trigger" @click="selectAddress">1323</span>
    </mt-field>
    <mt-cell title="标题文字">
      <span style="float: left;">icon 是图片</span>
    </mt-cell>
    <mt-field  label="详细地址" placeholder="请输入详细地址" type="textarea" rows="4" v-model="address"></mt-field>
    <mt-button class="add-address" type="danger">添加新地址</mt-button>
    <van-popup v-model="show" position="bottom">
      <van-area :area-list="areaList" @cancel="doCancel" @confirm="confirm" />
    </van-popup>
  </div>
</template>

<script>
  import { CITY, PROVINCE, AREA } from '@/common/district'
  import MyHeader from '@/components/Header'
  export default {
    name: 'AddNewAddress',
    components: {
      MyHeader
    },
    data () {
      return {
        show: false,
        username: '',
        telephone: '',
        zipCode: '',
        address: '',
        inputAddress: '',
        areaList: {
          province_list: {},
          city_list: {},
          county_list: {}
        }
      }
    },
    created () {
      var tempProvince = {}
      PROVINCE.forEach(province => {
        tempProvince[province.codeP] = province.name
      })
      var tempCities = {}
      CITY.forEach(city => {
        tempCities[city.codeC] = city.name
      })
      var tempAreas = {}
      AREA.forEach(area => {
        tempAreas[area.codeA] = area.name
      })
      this.areaList.province_list = tempProvince
      this.areaList.city_list = tempCities
      this.areaList.county_list = tempAreas
    },
    methods: {
      doCancel () {
        this.show = false
      },
      confirm (data) {
        console.log(data)
      },
      selectAddress () {
        console.log('ok')
        this.show = !this.show
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/px2rem";
  @import "../assets/css/variable";
  .add-address{
    width: calc(100% - 1rem);
    box-sizing: border-box;
    margin: 0 0.5rem;
    background-color:$theme-color ;
  }

</style>
